<template>
    <div id="chatDargBar">
        {{ currentFriend }}
        <span class="close" @click="close">
            <el-icon>
                <Close />
            </el-icon>
        </span>
    </div>
</template>

<script setup lang="ts">
import chatModel from '@/ChatMocel'
import eventBus from '@/Util/EventBus'
import { Close } from '@element-plus/icons-vue'
const { close } = defineProps<{
    close: any
}>()
let currentFriend = ref('')
onMounted(() => {
    updateCurrentFriend()
    eventBus.on('updateCurrentFriend', updateCurrentFriend)
})
let updateCurrentFriend = () => {
    currentFriend.value = chatModel.getCurrentChatfriend(true)
}
</script>


<style scoped lang="less">
#chatDargBar {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 40px;
    position: relative;
    color: #fff;
    font-size: 18px;

    .close {
        cursor: pointer;
        color: #fff;
        top: 0px;
        right: 10px;
        position: absolute;
    }
}
</style>
